    <template>
      <!-- 编辑界面 -->
      <el-dialog :title="title" :visible.sync="isVisible" width="60%" @click="closeDialog(false)" @close="closeDialog(false)">

        <el-tabs active-name="基本信息">
          <el-tab-pane title="基本信息" label="基本信息" lazy="lazy"  name="基本信息">
            <div style="width: 100%">

            <el-form label-width="120px"  :model="editForm" :rules="rules" ref="editForm">
              <el-form-item label="广告名称" prop="name">
                <el-input size="small" v-model="editForm.name" auto-complete="off" placeholder="请输入广告名称"></el-input>
              </el-form-item>
              <el-form-item label="所在页面" prop="pageName">
                <el-input size="small" v-model="editForm.pageName" auto-complete="off" placeholder="请输入广告所在页面"></el-input>
              </el-form-item>
              <el-form-item label="所在渠道" prop="channelName">
                <el-input size="small" v-model="editForm.channelName" auto-complete="off" placeholder="请输入广告所在渠道"></el-input>
              </el-form-item>
            </el-form>

            <div slot="footer" class="dialog-footer" style="text-align: right">
              <el-button size="small" @click="closeDialog(false)">取消</el-button>
              <el-button size="small" type="primary"  class="title" @click="submitForm('editForm')">保存</el-button>
            </div>

            </div>
          </el-tab-pane>

          <el-tab-pane title="图片管理" label="图片管理" name="图片管理">
            <div>
            <el-table size="small" :data="imageList" highlight-current-row style="width: 100%;">

              <el-table-column sortable prop="imgUrl" label="课程图片" width="100">
                <template slot-scope="scope">
                  <el-upload
                    class="avatar-uploader"
                    :show-file-list="false"
                    with-credentials
                    name="file"
                     :action="uploadUrl()"
                    :on-error="uploadError"
                    :on-success="handleAvatarSuccess"
                    :before-upload="beforeAvatarUpload"
                    enctype="multipart/form-data">
                    <img v-if="scope.row.imgUrl" :src="scope.row.imgUrl" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                  </el-upload>
                </template>
              </el-table-column>

              <el-table-column  prop="title" label="图片标题" width="200">
              </el-table-column>
              <el-table-column  prop="url" label="跳转地址" width="200">
              </el-table-column>

              <el-table-column align="center" label="操作" min-width="200">
                <template slot-scope="scope">

                  <el-button size="mini" type="primary" @click="editImageRow(scope.$index, scope.row)">编辑</el-button>
                  <el-button size="mini" type="danger" @click="deleteImageRow(scope.$index, scope.row)">删除</el-button>

                </template>
              </el-table-column>
            </el-table>

            <el-form label-width="120px"  :model="editImage" :rules="rulesImage" ref="editImage">
              <el-form-item label="图片标题" prop="title">
                <el-input size="small" v-model="editImage.title" auto-complete="off" placeholder="请输入图片标题"></el-input>
              </el-form-item>
              <el-form-item label="跳转地址" prop="url">
                <el-input size="small" v-model="editImage.url" auto-complete="off" placeholder="请输入要跳转的地址"></el-input>
              </el-form-item>
              <el-form-item label="上传图片" prop="imgUrl">
                <el-upload
                  class="avatar-uploader"
                  :show-file-list="false"
                  with-credentials
                 name="file"
                 :action="uploadUrl"
                :on-error="uploadError"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload"
                enctype="multipart/form-data">
                <img v-if="editImage.imgUrl" :src="editImage.imgUrl" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>

              </el-form-item>
            </el-form>

              <div slot="footer" class="dialog-footer" style="text-align: right">
                <el-button size="small" type="primary"  class="title" @click="submitImageForm('editImage')">保存信息</el-button>
              </div>



            </div>
          </el-tab-pane>


        </el-tabs>
      </el-dialog>

    </template>

<script>
    import axios from "axios"
    import { quillEditor } from "vue-quill-editor";
    import "quill/dist/quill.core.css";
    import "quill/dist/quill.snow.css";
    import "quill/dist/quill.bubble.css";
    import {cmsApi} from "../../api/baseApi";

    export default {
        name: 'AdvertisementEdit',
        componentName: 'AdvertisementEdit',
        components:{quillEditor},
        props: {
            dialogVisible:false,
            rowData:{}
        },
        data() {
            return {
                isEditing:false,
                title: '添加',
                content:"",
                //tab-1
                isVisible: this.dialogVisible,
                editForm: {},
                rules: {
                    name: [
                        { required: true, message: '请输入广告名称', trigger: 'blur' }
                    ],
                    pageName: [{ required: true, message: '请输入所在页面', trigger: 'blur' }],
                    channelName: [{ required: true, message: '请输入所在渠道', trigger: 'blur' }]
                },

                //tab-2
                imageList:[],
                editImage:{},
                rulesImage:{
                    title: [{ required: true, message: '请输入图片标题', trigger: 'blur' }],
                    imgUrl: [{ required: true, message: '请上传图片', trigger: 'blur' }],
                }
            };
        },
        methods:{

            // 关闭编辑、增加弹出框
            closeDialog(saveOrNot) {
                this.isVisible = false;
                this.$emit('onDialogClose',saveOrNot);
            },

            //提交基本信息
            submitForm(editData) {
                this.$refs[editData].validate(valid => {
                    if (valid) {
                        axios.post("api/backend-cms-admin/advertisement/save",this.editForm)
                            .then(res=>{
                               this.closeDialog(true);
                            }).catch(err=>{
                            this.$message.error('公司保存失败，请稍后再试！')
                        })

                    } else {
                        return false
                    }
                })
            },

            //提交图片信息
            submitImageForm(editData){
                this.$refs[editData].validate(valid => {
                    if (valid) {

                        //保证图片上传信息是ok的
                        this.editImage.advertisementId = this.editForm.id;

                        axios.post(cmsApi+"advertisement-item/save",this.editImage)
                            .then(res=>{
                              this.loadImageList();
                            }).catch(err=>{
                            this.$message.error('公司保存失败，请稍后再试！')
                        })

                    } else {
                        return false
                    }
                })
            },

            //加载图片列表
            loadImageList:function(){

                this.editImage = {};
                axios.get(cmsApi+"advertisement-item/list/"+this.editForm.id)
                    .then(res => {
                        console.log("image-list",res);

                        if (res.data.code !=1) {
                            this.$message({
                                type: 'info',
                                message: res.message
                            })
                        } else {
                            this.imageList = res.data.data;
                        }
                    })
                    .catch(err => {
                        this.$message.error('菜单加载失败，请稍后再试！')
                    })
            },

            editImageRow:function(index,row){
                this.editImage = row;
            },
            deleteImageRow:function(index,row){
                this.$confirm('确定要删除吗?', '信息', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                })
                    .then(() => {
                        axios.delete(cmsApi+"advertisement-item/"+row.id)
                            .then(res=>{
                               this.loadImageList();
                            }).catch(err=>{
                            this.$message.error('公司保存失败，请稍后再试！')
                        })
                    })
                    .catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消删除'
                        })
                    })
            },

            //图片上传
            uploadUrl() {
                //var url = process.env.BASE_API + "url" // 生产环境和开发环境的判断
                return "http://url";
            },
            uploadError() {
                this.$message.error('上传失败，请重新上传')
            },
            // 上传图片-成功
            handleAvatarSuccess(res, file) {
                if (this.activeName == '1') {
                    this.editImage.imgUrl = URL.createObjectURL(file.raw)
                    // this.showNoticeUploading = false
                    // this.noticeImageUrl = res
                    // this.editImage.imgUrl = res
                } else if (this.activeName == '3') {
                    // this.markingpic = URL.createObjectURL(file.raw)
                    // this.showMarkingUploading = false
                    // this.marketImageUrl = res
                }
            },
            // 图片长传-之前
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;
                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!')
                    return
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!')
                    return
                }
            }

        },
        watch: {

            //监听窗口变化，通知母版
            dialogVisible: {
                handler: function (val) {
                    if (val) {
                        this.isVisible = true;
                        this.editForm = this.rowData;
                        this.loadImageList();
                        if(this.rowData.id!=undefined && this.rowData.id>0){
                            this.title="编辑";
                        }
                        else{
                            this.title = "添加";
                        }
                    }
                }
            }

        }
    };
</script>

    <style scoped>
      .avatar{
        max-width: 150px;
        max-height: 150px;
      }
    </style>

